<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
      </image>
      
    </view>
    <view class="login-form-content">
	   <view class=" align-center justify-center flex">
		<text class="title">人才痕迹APP注册</text>
	   </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="registerForm.userName" class="input" type="text" placeholder="请输入账号" maxlength="30" />
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="registerForm.password" type="password"  class="input" placeholder="请输入密码" maxlength="20"/>
	  </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="registerForm.confirmPassword" type="password" class="input" placeholder="请输入重复密码" maxlength="20" />
      </view>
      <view class="action-btn">
        <button @click="handleRegister()" type="primary" style="background-color: #007BFF;color:#FFFFFF;fontWeight:1000" class="register-btn cu-btn block bg-blue lg round">注册</button>
      </view>
    </view>
   <view class="xieyi text-center">
      <text @click="handleUserLogin" style="color:#46A3FF" class="text-white">使用已有账号登录</text>
    </view>
  </view>
</template>

<script>
  import UserApi from '@/api/user.js'
  export default {
    data() {
      return {
        globalConfig: getApp().globalData.config,
		isError: false,
        registerForm: {
          userName: "",
          password: "",
          confirmPassword: "",
        }
      }
    },
    methods: {
	 checkMinLength() {
		  if (this.registerForm.password.length < 5) {
			this.isError = true;
		  } else {
			this.isError = false;
		  }
		},
      // 用户登录
      handleUserLogin() {
        this.$tab.navigateTo(`/pages/login/login`)
      },
      // 注册方法
      async handleRegister() {
		  const isValidUserName= /^[\w\u4e00-\u9fa5]+$/.test(this.registerForm.userName)
		  let hasDigit = /[0-9]/.test(this.registerForm.password);  // 判断是否包含数字
		  let hasLetter = /[a-zA-Z]/.test(this.registerForm.password);  // 判断是否包含字母
        if (this.registerForm.userName === "") {
          this.$modal.msgError("请输入您的账号")
        }else if(!isValidUserName){
		  this.$modal.msgError("账号只能包含字母、数字、下划线和汉字！")
		}else if (this.registerForm.password === "") {
          this.$modal.msgError("请输入您的密码")
        }  else if (this.registerForm.password.length <=5) {
		  this.$modal.msgError("请输入最少6位的密码")
		} else if (!hasDigit || !hasLetter) {
		 this.$modal.msgError("请输入包含数字和字母的密码")
		}
		else if (this.registerForm.confirmPassword === "") {
          this.$modal.msgError("请再次输入您的密码")
        } else if (this.registerForm.password !== this.registerForm.confirmPassword) {
          this.$modal.msgError("两次输入的密码不一致")
        } 
		else {
          this.$modal.loading("注册中，请耐心等待...")
          this.register()
        }
      },
      // 用户注册
      async register() {
        UserApi.register(this.registerForm).then(res => {
          this.$modal.closeLoading()
		  if(res?.data?.code == 0){
			uni.showModal({
				title: "系统提示",
				content: "恭喜你，您的账号 " + this.registerForm.userName + " 注册成功！",
				success: function (res) {
					if (res.confirm) {
				  uni.redirectTo({ url: `/pages/login/login` });
					}
				}
			})	  
		  }else{
			  this.$modal.msgError(res?.data?.msg)
		  }

        }).catch(() => {
         
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .normal-login-container {
    width: 100%;
	background-image: url('/static/img/logo.jpg'); /* 设置背景图片路径 */
	 background-size: 100% 100%; /* 背景图片完全覆盖元素区域 */
	  
  .login-form {
	//background-color:#E0E0E0; /* 白色背景，半透明 */
			margin: -9px 20px 0 20px;
			height: 300px;
			border-radius:20px;
		//	box-shadow: 0 20px 700px #E0E0E0;
			padding: 40px;
  }
    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;

      image {
        border-radius: 4px;
      }
    }

    .login-form-content {
	//	background-color:#E0E0E0; /* 白色背景，半透明 */
				margin: -9px 20px 0 20px;
				height: 300px;
				border-radius:20px;
		//		box-shadow: 0 20px 700px #E0E0E0;
				padding: 40px;
		text-align: center;
		margin: 20px;
		margin-top: 15%;
	  .title{
		  font-size: 40rpx;
		  color: white;
		  font-weight: bold;
		  color:black;
	  }
      .input-item {
        margin: 20px auto;
        height: 45px;
        border-radius: 20px;
        border: 1px solid black;
        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999;
        }

        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
        }

      }

      .register-btn {
        margin-top: 40px;
        height: 45px;
      }

      .xieyi {
        color: #333;
        margin-top: 20px;
      }
      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
  }
  .rgister-btn{
	  height: 5px;
	  width:200px;
	  top:0px;
	  left:-200px;
	  background: linear-gradient(to right, rgba(0,0,0,0), #aaffff);
	  border-top-right-radius: 1px;
	  border-bottom-right-radius: 1px;
	  animation: span1 2s linear infinite;
	  animation-delay: 1s;
  }

</style>
